/**主视图头部栏 */
export const ContentViewNav = defineComponent({
  name: 'ContentView',
  setup(props, {slots}) {
    return () => (
      <div class='h-mainViewNav border-b border-default bg-white flex justify-start items-center'>
        {slots.default?.()}
      </div>
    )
  }
})

/**主视图 */
export const ContentViewContent = defineComponent({
  name: 'ContentView',
  props: {
    showNav: {
      type: Boolean,
      default: () => true
    },
    showFooter: {
      type: Boolean,
      default: () => true
    }
  },
  setup(props, {slots}) {
    let {showNav, showFooter} = toRefs(props)
    return () => (
      <div
        class={[
          showNav.value && showFooter.value
            ? 'h-mainViewcontent'
            : !showNav.value && showFooter.value
            ? 'h-mainViewcontentNoFooter'
            : showNav.value && !showFooter.value
            ? 'h-mainViewcontentNoNav'
            : !showNav.value && !showFooter.value
            ? 'h-full'
            : '',
          ' border-default overflow-y-hidden bg-white'
        ]}
      >
        {slots.default?.()}
      </div>
    )
  }
})

/**主视图底部栏 */
export const ContentViewFooter = defineComponent({
  name: 'ContentView',
  setup(props, {slots}) {
    return () => (
      <div class='h-mainViewfooter border-t border-default bg-white flex justify-start items-center px-4'>
        {slots.default?.()}
      </div>
    )
  }
})

/**主视图外框 */
export const ContentViewLayout = defineComponent({
  name: 'ContentViewLayout',
  setup(props, {slots}) {
    return () => (
      <div class='h-full flex-1 bg-main'>
        {slots.nav?.()}
        {slots.content?.()}
        {slots.footer?.()}
      </div>
    )
  }
})

/**主视图有头部栏和底部栏 */
export const ContentView = defineComponent({
  name: 'ContentView',
  setup(props, {slots}) {
    return () => (
      <ContentViewLayout>
        {{
          nav: () => <ContentViewNav>{slots.nav?.()}</ContentViewNav>,
          content: () => <ContentViewContent>{slots.content?.()}</ContentViewContent>,
          footer: () => <ContentViewFooter>{slots.footer?.()}</ContentViewFooter>
        }}
      </ContentViewLayout>
    )
  }
})

/**主视图无头部栏 */
export const ContentViewNoNav = defineComponent({
  name: 'ContentViewNoNav',
  setup(props, {slots}) {
    return () => (
      <ContentViewLayout>
        {{
          content: () => (
            <ContentViewContent showNav={false}>{slots.content?.()}</ContentViewContent>
          ),
          footer: () => <ContentViewFooter>{slots.footer?.()}</ContentViewFooter>
        }}
      </ContentViewLayout>
    )
  }
})

/**主视图无底部栏 */
export const ContentViewNoFooter = defineComponent({
  name: 'ContentViewNoFooter',
  setup(props, {slots}) {
    return () => (
      <ContentViewLayout>
        {{
          nav: () => <ContentViewNav>{slots.nav?.()}</ContentViewNav>,
          content: () => (
            <ContentViewContent showFooter={false}>{slots.content?.()}</ContentViewContent>
          )
        }}
      </ContentViewLayout>
    )
  }
})

/**主视图无头部栏和底部栏 */
export const ContentViewNoNavAndFooter = defineComponent({
  name: 'ContentViewNoNavAndFooter',
  setup(props, {slots}) {
    return () => (
      <ContentViewLayout>
        {{
          content: () => (
            <ContentViewContent showNav={false} showFooter={false}>
              {slots.content?.()}
            </ContentViewContent>
          )
        }}
      </ContentViewLayout>
    )
  }
})
